{include file='common/head.html'}
<link rel="stylesheet" href="{APP_THEME_DIR}/zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="{APP_THEME_DIR}/zTree_v3/js/jquery.ztree.core.min.js"></script>
<style>
    html,body {
        height: 100%;
    }
    body {
        overflow-x: hidden;
    }
    #aside {
        width: 200px;
        background: #f9f9f9;
        padding: 5px 0 20px;
        overflow: hidden;
        border-right: 1px solid #eee;
        height: 100%;
        box-sizing: border-box;
    }
    #main {
        position: absolute;
        margin: 0px;
        inset: 0px 0px 0px 205px;
        width: calc(100% - 200px);
        z-index: 0;
        display: block;
        visibility: visible;
        background: #FFF;
        padding: 0px;
        height: 100%;
        right: 0;
            top: 0;
    }
    #content_body {
        height: 100%;
    }
    .pReload {
        padding-left: 10px;
        font-size: 12px;
        margin-bottom: 5px;
        cursor: pointer;
        color: #999;
    }
    .pReload:hover {
        color: #333;
    }
    .ztree {
        padding: 20px 8px;
    }
    .ztree li {
        line-height: 28px;
    }
    .ztree .node_name {
        font-size: 13px !important;
    }
    .ztree li a {
        vertical-align: middle;
    }
    .ztree li a .node_name {
        vertical-align: top;
    }
    #aside:hover {overflow-y: auto;}
    #aside:hover .ztree{overflow-x: auto;}
    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar{
        width: 6px;
        height: 6px;
        background-color: #F5F5F5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
        border-radius: 10px;
        background-color: #F7F7F7;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb{
        border-radius: 10px;
        box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .1);
        background-color: #c8c8c8;
    }
</style>


<script>
    var zNodes = [
        {foreach $sorts(key,value)}
        {if($value->outlink)}
        {id: [value->scode], pId: [value->pcode], name: "[value->name]", url: 'javascript:void(0)', target: 'content_body', {if($value->son)}open: true, isParent: true{else}isParent: false{/if}},
        {else}
        {if($value->type==1)}
        {id: [value->scode], pId: [value->pcode], name: "[value->name]", url: '{url./admin/Single/mod/mcode/'.$value->mcode.'/id/'.get_single_id($value->scode).'}', target: 'content_body', {if($value->son)}open: true, isParent: true{else}isParent: false{/if}},
        {/if}
        {if($value->type==2)}
        {id: [value->scode], pId: [value->pcode], name: "[value->name]", url: '{url./admin/Content/index/mcode/'.$value->mcode.'/scode/'.$value->scode.'}', target: 'content_body', {if($value->son)}open: true, isParent: true{else}isParent: false{/if}},
        {/if}
        {/if}
        {/foreach}
    ];
    var setting = {
        view: {
            dblClickExpand: false,
            showLine: true,
            showIcon: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            beforeExpand: beforeExpand,
            onExpand: onExpand,
            onClick: onClick
        }
    };
    var curExpandNode = null;

    function beforeExpand(treeId, treeNode) {
        var pNode = curExpandNode ? curExpandNode.getParentNode() : null;
        var treeNodeP = treeNode.parentTId ? treeNode.getParentNode() : null;
        var zTree = $.fn.zTree.getZTreeObj("tree");
        for (var i = 0, l = !treeNodeP ? 0 : treeNodeP.children.length; i < l; i++) {
            if (treeNode !== treeNodeP.children[i]) { zTree.expandNode(treeNodeP.children[i], false); }
        };
        while (pNode) {
            if (pNode === treeNode) { break; }
            pNode = pNode.getParentNode();
        };
        if (!pNode) { singlePath(treeNode); }
    };

    function singlePath(newNode) {
        if (newNode === curExpandNode) return;
        if (curExpandNode && curExpandNode.open == true) {
            var zTree = $.fn.zTree.getZTreeObj("tree");
            if (newNode.parentTId === curExpandNode.parentTId) {
                zTree.expandNode(curExpandNode, false);
            } else {
                var newParents = [];
                while (newNode) {
                    newNode = newNode.getParentNode();
                    if (newNode === curExpandNode) {
                        newParents = null;
                        break;
                    } else if (newNode) {
                        newParents.push(newNode);
                    }
                }
                if (newParents != null) {
                    var oldNode = curExpandNode;
                    var oldParents = [];
                    while (oldNode) {
                        oldNode = oldNode.getParentNode();
                        if (oldNode) {
                            oldParents.push(oldNode);
                        }
                    }
                    if (newParents.length > 0) {
                        zTree.expandNode(oldParents[Math.abs(oldParents.length - newParents.length) - 1], false);
                    } else {
                        zTree.expandNode(oldParents[oldParents.length - 1], false);
                    }
                }
            }
        }
        curExpandNode = newNode;
    };

    function onExpand(event, treeId, treeNode) { curExpandNode = treeNode; };

    function onClick(e, treeId, treeNode) {
        var zTree = $.fn.zTree.getZTreeObj("tree");
        zTree.expandNode(treeNode, null, null, null, true);
    }

    $(function() {
        $.fn.zTree.init($("#tree"), setting, zNodes);
        $(".ui-layout-north li:first-child").click();
    });
</script>

<div id="aside">
    <ul id="tree" class="ztree"></ul>
</div>

<div id="main">
    <iframe name="content_body" id="content_body" src="{url./admin/Index/contenthome}" frameborder="0" width="100%" height="100%">
    </iframe>
</div>
<!-- 右侧主体结束 -->
{include file='common/foot.html'}